<template>
  <el-card>
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0"
      @click="deletePanelItem"
    />
    <template #header>
      <div class="el-card-title">日程安排</div>
    </template>
    <el-calendar>
      <template #date-cell="{ data }">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split("-").slice(1).join("-") }}
          {{ data.isSelected ? "📆" : "" }}
        </p>
      </template>
    </el-calendar>
  </el-card>
</template>

<script lang="ts" setup>
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, url } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

onMounted(() => {});
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
}
.el-card-title {
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  color: #409eff;
}

.el-icon-close {
  top: 16px !important;
  right: 16px !important;
}

:deep(.el-card__header) {
  border-bottom: none;
  font-size: 14px;
  padding: 12px 20px;
  margin: 5px;
  border-radius: 6px;
  font-weight: 600;
  background: rgba(212, 219, 249, 0.3);
  cursor: pointer;
  color: #409eff;
}
:deep(.el-card__body) {
  padding: 0px !important;
  font-size: 14px !important;
  height: calc(100% - 55px);
  overflow: auto;
}

// 日历样式
:deep(.el-calendar) {
  background-color: transparent;
  .el-calendar-day {
    height: 40px !important;
    p {
      margin: 0 !important;
      font-size: 13px;
      font-family: DINLight;
    }
  }
  .el-calendar-table {
    thead th {
      padding: 10px 0 !important;
      font-size: 12px !important;
    }
    td.is-selected,
    .el-calendar-day:hover {
      background: rgba(212, 219, 249, 0.2);
      cursor: pointer;
      color: #409eff;
    }
  }
  .el-calendar__body {
    padding: 10px 12px;
  }
}
</style>
